<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/08-commodity.css">
    <link rel="stylesheet" href="../css/media.css">
    <link rel="stylesheet" href="../css/Common.css">
</head>

<body>
    <!-- 下拉菜单 -->   
    <div class="wrap">
        <select  class="title" name="selectAge" id="selectAge">
            
        </select>

        <select  class="title1" name="selectAge" id="selectAge">
            
        </select>

        <select name="selectAge" id="selectAge">
            <option value="1">全部价格</option>
        </select>
        <span><a href="javascript:;"></a></span>
        
    </div>

    <div class="index-menu"></div>

</body>

</html>
<script src="../lib/jquery-1.12.4.min.js"></script>
<!-- 模板文件 -->
<script src="../js/template.js"></script>
<!-- 头 -->
<script type="text/template" id="title">
   {{each result as val key}}
        <option data-id="{{val.shopId}}">{{val.shopName}}</option>
   
   {{/each}}
</script>
<script type="text/template" id="title1">
    {{each result as val key}}
        <option data-id="{{val.areaId}}">{{val.areaName}}</option>
    
    {{/each}}
 </script>


<!-- 下面商品的模板引擎 -->
<script type="text/template" id="menuTemplate">
    {{each result as val key}}
    <div class="daily">
        <div><a href="javascripy:;"><img src="{{val.productImg}}" alt=""></a></div>
        <div class="productName">{{val.productName}}</div>
        <span>{{val.productPrice}}</span>
        <a class="add-on" href="javascript:;">去凑单</a>
        
    </div>
    {{/each}}
</script>

<script>
    var shopid =0;
    var areaid =0;
    render(shopid,areaid);
    title();
    title1();

    
     //头
     function title(){
        $.ajax({
            url:"http://193.112.55.79:9090/api/getgsshop",
            type:'get',
            dataType:'json',
            success:function(res1){
                console.log(res1)
                template.config('escape',false)
                if(res1){
                    var htmlStr1=template('title',res1);
                    // console.log(htmlStr1);
 
                    //动态渲染数据
                    $('.title').html(htmlStr1);
                    

                    $('.title').change(function(){
                        shopid=$('.title').find('option:selected').attr('data-id')
                        // console.log($('.title').find('option:selected').attr('data-id'))
                        render(shopid,areaid)
                    })
                    
               }
            }
        })
    }

     function title1(){
        $.ajax({
            url:"http://193.112.55.79:9090/api/getgsshoparea",
            type:'get',
            dataType:'json',
            success:function(res2){
                console.log(res2)
                template.config('escape',false)
                if(res2){
                    var htmlStr2=template('title1',res2);
                    console.log(htmlStr2);
 
                    //动态渲染数据
                    $('.title1').html(htmlStr2);

                    $('.title1').change(function(){
                        areaid=$('.title1').find('option:selected').attr('data-id')
                        // console.log($('.title').find('option:selected').attr('data-id'))
                        render(shopid,areaid)
                    })
                }
            }
        })
    }

    // 下面商品
    function render(shopid,areaid){
        $.ajax({
            url: 'http://193.112.55.79:9090/api/getgsproduct',
            type: 'get',
            dataType: 'json',
            data:{
                shopid: shopid,
                areaid: areaid
            },
            success: function(res) {
                console.log('res ajax返回的数据----->',res);
                template.config('escape', false)
                if (res) {

                 
                    var htmlStr = template('menuTemplate',res);
                    console.log(htmlStr);

                    // 动态渲染数据
                    $('.index-menu').html(htmlStr);
                }
            }
        })
    }
  

  
   
</script>